<template>
  <div class="multi-device-container">
    <h1>多端访问</h1>
    <p>您可以通过以下设备访问：</p>

    <!-- 设备列表 -->
    <van-row :gutter="20">
      <!-- 手机访问 -->
      <van-col :span="24">
        <van-card class="device-card">
          <template #thumb>
            <div class="device-icon">
              <van-icon name="phone-o" size="50" />
            </div>
          </template>
          <template #title>
            <h3>手机访问</h3>
          </template>
          <template #desc>
            <p>使用手机浏览器扫描二维码，快速访问。</p>
          </template>
          <template #footer>
            <van-button type="primary" @click="showQRCode('mobile')">
              生成二维码
            </van-button>
          </template>
        </van-card>
      </van-col>

      <!-- 电脑访问 -->
      <van-col :span="24">
        <van-card class="device-card">
          <template #thumb>
            <div class="device-icon">
              <van-icon name="desktop-o" size="50" />
            </div>
          </template>
          <template #title>
            <h3>电脑访问</h3>
          </template>
          <template #desc>
            <p>在电脑浏览器中输入网址，轻松访问。</p>
          </template>
          <template #footer>
            <van-button type="primary" @click="copyLink">
              复制链接
            </van-button>
          </template>
        </van-card>
      </van-col>

      <!-- 平板访问 -->
      <van-col :span="24">
        <van-card class="device-card">
          <template #thumb>
            <div class="device-icon">
              <van-icon name="tablet-o" size="50" />
            </div>
          </template>
          <template #title>
            <h3>平板访问</h3>
          </template>
          <template #desc>
            <p>使用平板设备扫描二维码，便捷访问。</p>
          </template>
          <template #footer>
            <van-button type="primary" @click="showQRCode('tablet')">
              生成二维码
            </van-button>
          </template>
        </van-card>
      </van-col>
    </van-row>

    <!-- 二维码弹窗 -->
    <van-dialog
      v-model:show="qrCodeVisible"
      title="扫描二维码"
      width="30%"
      show-cancel-button
    >
      <div class="qr-code-content">
        <img :src="qrCodeUrl" alt="QR Code" v-if="qrCodeUrl" />
        <p v-else>正在生成二维码...</p>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';

// 二维码弹窗的显示状态
const qrCodeVisible = ref(false);

// 二维码图片地址
const qrCodeUrl = ref('');

// 显示二维码
const showQRCode = (deviceType) => {
  qrCodeVisible.value = true;
  // 模拟生成二维码（实际项目中可以调用后端接口生成）
  qrCodeUrl.value = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://example.com/${deviceType}`;
};

// 复制链接
const copyLink = () => {
  const link = 'https://example.com';
  navigator.clipboard.writeText(link).then(() => {
    showToast('链接已复制到剪贴板！');
  });
};
</script>

<style scoped>
.multi-device-container {
  padding: 20px;
  text-align: center;
}

.device-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.device-icon {
  text-align: center;
  margin-bottom: 10px;
  color: #1989fa;
}

.device-card h3 {
  margin: 10px 0;
  font-size: 18px;
  text-align: center;
}

.device-card p {
  margin: 10px 0;
  font-size: 14px;
  color: #666;
  text-align: center;
}

.device-card .van-button {
  width: 100%;
  margin-top: 10px;
}

.qr-code-content {
  text-align: center;
}

.qr-code-content img {
  width: 150px;
  height: 150px;
}
</style>